<template>
    <sea-request class="flex-row" url="/sys/permit/list" :result-parser="resultParser">
        <template #default="{response, reload, loading}">
            <div class="flex-header">
                <span>勾选所需的权限之后，记得点击保存！</span>
                <button @click="reload" class="pull-right sea-btn-link" title="刷新权限列表">
                    <i class="fa fa-refresh"></i>
                </button>
            </div>
            <div class="flex-body">
                <el-skeleton :data="response" :loading="loading">
                    <el-tree ref="treeRef"
                             node-key="id"
                             default-expand-all
                             :data="response"
                             :show-checkbox="true"
                             :expand-on-click-node="false"></el-tree>
                </el-skeleton>
            </div>
            <div class="flex-footer">
                <el-button type="primary" title="保存操作权限配置" class="pull-right">保存</el-button>
            </div>
        </template>
    </sea-request>
</template>

<script setup>
import Bamboo from "@/lang/bamboo";
import {onMounted, ref, watch} from "vue";

// Reference
const treeRef = ref();

const props = defineProps({
    // 成功回调，通常是刷新数据表格
    object: {type: Object, default: undefined}
})

/**
 * 查询结果转换为树形结构
 */
const resultParser = (list) => {
    return Bamboo.toTree(list, Bamboo.mapper_default);
}

const handleMenuChange = (val) => {
    if (val !== undefined) {
        Layers.ajax({
            url: '/authority/permit/list',
            method: 'GET',
            params: {roleId: val.id}
        }).then((result) => {
            if (result.code === 0) {
                let list = result.data;
                let checked = Bamboo.getIds(list);
                treeRef.value.setCheckedKeys(checked);
            }
        });
    }
}

watch(() => props.object, handleMenuChange);


onMounted(() => {
    if (props.object) {
        handleMenuChange(props.object);
    }
})
</script>

<style scoped>

</style>